<template>
  <div class="song-list">
    <ul class="song-list-header">
      <li v-for="(item,index) in songStyle" :key="index" @click="handleChangeView(item.name)"
          :class="{active:item.name==activeName}">
        {{item.name}}
      </li>
    </ul>
    <div>
      <ContentList :contentList="newSongList"></ContentList>
      <div class="pagination">
        <el-pagination  @current-change="handleCurrentChange" background layout="prev,pager,next,total"
                       :current-page="currentPage" :page-size="pageSize" :total="songList.length">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import ContentList from "@/components/ContentList";
export default {
name: "SongList",
  components:{
    ContentList
  },
  mounted() {
  this.getAllList()
  },
  data(){
     return{
       songList:[] ,   //所有歌单
       pageSize: 15,        //页面大小，一页有15条数据
       currentPage: 1,      //当前页，默认第一页
       songStyle:[          //风格
         {name:'全部歌单'},
         {name:'民谣'},
         {name:'华语'},
         {name:'粤语'},
         {name:'欧美'},
         {name:'日韩'},
         {name:'轻音乐'},
         {name:'BGM'},
         {name:'乐器'},
       ],
       activeName:'全部歌单'       //当前风格
     }
  },
  methods:{
   async getAllList(){
     let result= await this.$API.reqShowAllSongList()
     if (result.code==10000){
       this.songList=result.data
     }else {
       this.$notify.error('系统错误')
     await Promise.reject(new Error('fail'))
     }
    },
    handleCurrentChange(val){
      this.currentPage = val;
    },
    handleChangeView(name){
     this.activeName=name
      this.songList=[]
      if (name=='全部歌单'){
        this.getAllList()
      }else {
      this.getSongListOfStyle(name)
      }
    },
    async getSongListOfStyle(name){
      let result=await this.$API.reqShowSongListFromStyle(name)
      if (result.code==10000){
        this.currentPage=1
        this.songList=result.data
      }else {
        this.$notify.error('系统错误')
        await Promise.reject(new Error('fail'))
      }
    }
  },
  computed:{
    newSongList(){
      return this.songList.slice((this.currentPage - 1)*this.pageSize,this.currentPage*this.pageSize)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/song-list.scss';
.pagination{
  display: flex;
  justify-content: center;
}
</style>
